<template>
	<div class="payorder">
		<van-sticky>
			<div class="payorder_navbar">
				<div @click="toOrderToPay">
					<van-icon name="arrow-left" style="font-size: 18px;line-height: 50px;margin-left: 20px;" />
				</div>
				<div>支付订单</div>
				<div></div>
			</div>
		</van-sticky>
		<div class="payorder_detail" v-model="order">
			<div>
				<span>支付剩余时间</span>
				<van-count-down style="font-size: 14px;line-height: 16px;
				color: #606266;" :time="time" format="mm : ss" />
			</div>
			<div>&yen;{{order.order_true_price}}</div>

		</div>
		<!-- 密码输入框 -->
		<van-password-input :value="value" info="密码为 6 位数字" :focused="showKeyboard" @focus="showKeyboard = true" />
		<!-- 数字键盘 -->
		<van-number-keyboard :show="showKeyboard" @input="onInput" @delete="onDelete" @blur="showKeyboard = false" />
		<div class="payorder_button">
		<van-button plain type="primary" to="order">取消支付</van-button>
		<van-button plain type="info" @click="payorder">确定支付</van-button>
		</div>
	</div>
</template>

<script>
	import { Notify } from 'vant';
	import PayOrderService from './PayOrderService.js'
	import tools from "@/tools/tools.js"
	export default {
		name: "PayOrder",
		data() {
			return {
				order:'',
				order_id:'',
				value: '',
				showKeyboard: true,
				orderCreateTime: '',//订单创建时间
				time:  15 * 60 * 1000,
			};
		},
		created() {
			this.order = this.$route.params.order;
			this.order_id=this.$route.params.order_id;
			if(this.order=='1'){
				PayOrderService.getGoodOrderService(this.order_id, res => {
					this.order = res.usergoodorder;
					this.orderCreateTime=res.usergoodorder.order_create_time//订单创建时间
					console.log("从一条龙进的");
					this.countTime()
				});
			}else{
				this.orderCreateTime=this.$route.params.order.order_create_time//订单创建时间
				console.log("从全部订单进的");
				this.countTime()
			}
		},
		methods: {
			toOrderToPay() {
				this.$router.replace('/order');
			},
			countTime() {
				//获取当前时间
				let date = new Date();
				//获得结束时间
				let createTime = new Date(this.orderCreateTime);
				console.log(createTime)
				let min = createTime.getMinutes();
				createTime.setMinutes(min + 30);
				//设置截止时间
				//时间差
				let differtime = createTime.getTime() - date.getTime();
				console.log('订单时间差')
				console.log(differtime)
				if (differtime >= 0) {
					this.time=Math.floor((differtime))
					console.log(this.time)
				}else{
					Notify({ type: 'success', message: '订单已超时' });
					let goodOrder = this.order;
					goodOrder.status = 13;//订单状态已过期
					PayOrderService.updateGoodOrderService(goodOrder,res=>{});
					this.$router.replace('/order');
				}
				
			},

			payorder(){//确认支付按钮
				let goodOrder = this.order;
				console.log("支付订单的order")
				console.log(this.order)
				goodOrder.carrier = '张三丰';
				goodOrder.carrier_telephone = '13245434313';
				goodOrder.order_pay_time = tools.dateFtt("yyyy-MM-dd hh:mm:ss", new Date());
				goodOrder.pay_style = 42;//默认支付宝
				goodOrder.status = 14;//订单状态已支付
				PayOrderService.updateGoodOrderService(goodOrder,res=>{
					console.log("支付按钮返回值");
					console.log(res)
				});
				
				PayOrderService.insertPointDetailService({
					order_id: this.order.order_id,
					point_change_amount: Math.floor(this.order.order_true_price/10),//10元 1积分
					point_change_id: 51,//积分增加
				},res=>{	
					console.log("积分增加");
				})

				Notify({ type: 'success', message: '支付成功' });
				this.$router.replace('/order');
			},
			
			onInput(key) {
				this.value = (this.value + key).slice(0, 6);
			},
			onDelete() {
				this.value = this.value.slice(0, this.value.length - 1);
			},

		},

		

	}
</script>

<style lang="less">
	.payorder {
		width: 100%;
		overflow: auto;
		//display: flex;

		.payorder_navbar {
			width: 100%;
			height: 50px;
			background-color: white;
			display: flex;
			background-color: #f3f3f3;

			div:nth-child(1) {
				width: 50px;
			}

			div:nth-child(2) {
				margin: auto;
				font-size: 18px;
				color: #303133;
				letter-spacing: 1px;
			}

			div:nth-child(3) {
				width: 50px;
			}
		}

		.payorder_detail {
			height: 100px;
			width: 100%;
			//background-color: lightblue;
			margin: 0 auto;
			text-align: center;

			div:nth-child(1) {
				margin-top: 20px;
				font-size: 14px;
				color: #606266;
				letter-spacing: 1px;

			}

			div:nth-child(2) {

				font-size: 30px;
				line-height: 50px;
				color: #303133;
				letter-spacing: 1px;

			}
		}
		.payorder_button{
			margin:10px auto;
			width: 60%;
			display: flex;
			justify-content: space-between;
		}
	}
</style>
